<template>
  <div class="container">
    <router-view></router-view>
    <tabbar class="tab">
      <tabbar-item :selected="activeNav == index" @click.native="go(item,index)" v-for="(item,index) in navs" :key="index">
        <img class="grey" slot="icon" :src="item.icon">
        <img slot="icon-active" :src="item.icon">
        <span slot="label">{{ $t(item.name) }}</span>
      </tabbar-item>
    </tabbar>
    <div v-transfer-dom>
      <popup v-model="showMsg" class="msg" position="top" :hide-on-deactivated="false" :show-mask="false">
        <div class="msg-cont">
          {{ msg }}
        </div>
      </popup>
    </div>
  </div>
</template>



<script>
  import {
    Tabbar,
    TabbarItem,
    Popup,
    TransferDom
  } from "vux"
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    directives: {
      TransferDom
    },
    components: {
      Tabbar,
      TabbarItem,
      Popup
    },
    data() {
      return {
        navs: [{
            url: '/home',
            name: '首页',
            icon: '/static/home.svg'
          },
          {
            url: '/market',
            name: '拍卖',
            icon: '/static/market.svg'
          },
          {
            url: '/find',
            name: '发现',
            icon: '/static/find.svg'
          },
          {
            url: '/cart',
            name: '购物车',
            icon: '/static/items.svg'
          },
          {
            url: '/mine',
            name: '我的',
            icon: '/static/mine.svg'
          }
        ],
        websock: null,
        invokeIdCnt: 0,
        showMsg: false,
        msg: ''
      }
    },
    stompClient: {
      monitorIntervalTime: 1000,
      stompReconnect: false,
      timeout(orgCmd) {}
    },
    mounted() {
      this.$nextTick(function() {
        // console.log('--------------------',this.$stompClient)
        // this.connectSrv()
      });
    },
    beforeDestroy () {
      // this.disconnect()
    },
    watch: {
      showMsg(val) {
        if (val) {
          setTimeout(() => {
            this.showMsg = false
          }, 5000)
        }
      }
    },
    methods: {
      go(item, index) {
        this.$router.replace(item.url);
      },
      onConnected(frame) {
        console.log('Connected: ' + frame);
        this.$stompClient.subscribe('/topic/notice', this.responseCallback, this.onFailed);
      },
      onFailed(frame) {
        console.log('Failed: ' + frame);
      },
      connectSrv() {
        var headers = {};
        this.connetWM(`${process.env.API_ROOT}/socket?accessToken=${window.localStorage.token_2}`, headers, this.onConnected, this.onFailed);
      },
      responseCallback(frame) {
        var res = JSON.parse(frame.body)
        console.log(frame)
        this.msg = res.result
        this.showMsg = true
      },
      disconnect() {
        console.log('--------------------------','close')
        this.disconnetWM();
      }
    },
    computed: {
      ...mapState({
        activeNav: state => state.activeNav
      })
    }
  };
</script>

<style lang="scss" scoped>
  .grey {
    filter: grayscale(100%);
    opacity: .5;
  }
  .tab {
    background-color: #fff;
    box-shadow: 0px -2px 20px 0px rgba(158, 158, 158, 0.2);
    &:before {
      display: none;
    }
  }
  .vux-popup-dialog.vux-popup-top {
    &.msg {
      overflow: hidden;
      width: 96%;
      margin: auto;
      top: 5px;
      left: 0;
      right: 0;
      background: #607D8B;
      border-radius: 5px;
      box-shadow: 0px 4px 12px 0px rgba(158, 158, 158, 0.3);
      .msg-cont {
        color: #fff;
        padding: 5px 12px;
        font-size: 12px;
        line-height: 1.4;
        text-align: justify;
      }
    }
  }
</style>

<style lang="scss">
  .weui-tabbar__item.weui-bar__item_on {
    .weui-tabbar__label {
      color: #799ac9!important;
    }
  }
</style>
